import { ref, reactive, computed } from 'vue'
import { elNotification } from '@/hooks/elNotification'

// 搜索、获取、分页、删除、修改状态、批量删除
export function useInitTable(opt = {}) {
    // 搜索表单
    let searchForm = null
    let resetSearchForm = null
    if (opt.searchForm) {
        searchForm = reactive({
            ...opt.searchForm
        })

        resetSearchForm = () => {
            for (const key in opt.searchForm) {
                searchForm[key] = opt.searchForm[key]
            }
            getData()
        }
    }

    // 加载动画
    const loading = ref(false)

    // 分页
    const currentPage = ref(1)
    const total = ref(0)
    const limit = ref(10)

    // 表格数据
    const tableData = ref([])

    // 获取数据
    function getData(p = null) {
        if (typeof p == "number") {
            currentPage.value = p
        }
        loading.value = true
        opt.getList(currentPage.value, searchForm).then(res => {
            if (opt.onGetListSuccess && typeof opt.onGetListSuccess == "function") {
                opt.onGetListSuccess(res)
            } else {
                tableData.value = res.list
                total.value = res.totalCount
            }

        }).finally(() => {
            loading.value = false
        })
    }
    getData()


    // 删除
    const handleDelete = (id) => {
        loading.value = true
        opt.delete(id).then(res => {
            elNotification('删除成功')
            getData()
        }).finally(() => {
            loading.value = false
        })
    }


    // 修改状态
    const handleStatusChange = (e, row) => {
        row.statusLoading = true
        opt.updateStatus(row.id, e).then(res => {
            elNotification("修改状态成功")
            row.status = e
        }).finally(() => {
            row.statusLoading = false
        })
    }

    // 批量选择ID
    const multiSelectionId = ref([])
    const handleSelectionChange = (e) => {
        multiSelectionId.value = e.map(item => item.id)
    }

    // 批量删除
    const mulitipTableRef = ref(null)
    const handleMultiDelete = () => {
        loading.value = true
        opt.delete(multiSelectionId.value).then(res => {
            elNotification("批量删除成功")
            // 清空选中
            if (mulitipTableRef.value) {
                mulitipTableRef.value.clearSelection()
            }
            getData()
        }).finally(() => {
            loading.value = false
        })
    }

    // 批量修改状态
    const handleMultiStatusChange = (status) => {
        loading.value = true
        opt.updateStatus(multiSelectionId.value, status).then(res => {
            elNotification("修改状态成功")
            // 清空选中
            if (mulitipTableRef.value) {
                mulitipTableRef.value.clearSelection()
            }
            getData()
        }).finally(() => {
            loading.value = false
        })
    }

    return {
        mulitipTableRef,
        handleSelectionChange,
        handleMultiDelete,
        searchForm,
        resetSearchForm,
        tableData,
        loading,
        currentPage,
        total,
        limit,
        getData,
        handleDelete,
        handleStatusChange,
        handleMultiStatusChange,
        multiSelectionId
    }
}

// 新增、修改
export function useInitForm(opt = {}) {
    // 表单部分
    const formRef = ref(null)
    const defaultFrom = opt.form
    const rules = reactive({ ...opt.rules })
    const formDrawerRef = ref(null)
    const form = reactive({

    })

    const editId = ref(0)
    const drawerTitle = computed(() => editId.value ? '修改公告' : '新增公告')

    // 提交表单
    const handleSubmit = () => {
        formRef.value.validate((valid) => {
            if (!valid) return

            formDrawerRef.value.showLoading()

            let body = {}
            if (opt.beforeSubmit && typeof opt.beforeSubmit === "function") {
                body = opt.beforeSubmit({ ...form })
            } else {
                body = form
            }

            const fun = editId.value ? opt.update(editId.value, body) : opt.create(body)

            fun.then(res => {
                elNotification(drawerTitle.value + '成功')
                opt.getData(editId.value ? false : 1)
                formDrawerRef.value.close()
            }).finally(() => {
                formDrawerRef.value.hideLoading()
            })
        })
    }

    // 重置表单
    function resetForm(row = false) {
        if (formRef.value) formRef.value.clearValidate()
        if (row) {
            for (const key in defaultFrom) {
                form[key] = row[key]
            }
        }
    }

    // 新增表单
    const handleCreate = () => {
        editId.value = 0
        resetForm(defaultFrom)
        formDrawerRef.value.open()
    }

    // 修改表单
    const handleEdit = (row) => {
        editId.value = row.id
        resetForm(row)
        formDrawerRef.value.open()
    }

    return {
        formDrawerRef,
        formRef,
        rules,
        form,
        editId,
        drawerTitle,
        handleSubmit,
        resetForm,
        handleCreate,
        handleEdit
    }
}